<script setup>
import localIcon from '../assets/imgs/play/local.png'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getPlayDetail } from '../api/api'

const route = useRoute()
const pid = ref(route.params.pid)
const lat = ref(route.params.lat)
const lng = ref(route.params.lng)
const playDetailList = ref("")
const way = ref("")

const baiduRef = ref()
const map = new BMap.Map('map') //创建地图实例
const point = ref()

const showPopup = ref(false)

// 演出详情
const getPlayDetailApi = async (id = pid.value, lngs = lng.value, lats = lat.value) => {
    let {data} = await getPlayDetail(id)
    playDetailList.value = data
    let localItem = data.shopName
    let address = data.address
    way.value = `https://map.baidu.com/mobile/webapp/search/search/qt=s&wd=${localItem}`
}

function initMap (lngs = lng.value, lats = lat.value, icon = localIcon ) {
    map.value = new BMap.Map(baiduRef.value);
    point.value = new BMap.Point(lngs, lats);
    map.value.centerAndZoom(point.value, 15);
    map.value.enableScrollWheelZoom(true); //滚轮缩放

    let marker;
    if (icon) {
        marker = new BMap.Marker(new BMap.Point(lngs, lats), {
        icon: new BMap.Icon(icon, new BMap.Size(30, 36)),
        });
    } else {
        marker = new BMap.Marker(new BMap.Point(lngs, lats));
    }

    map.value.addOverlay(marker);

    // 点击图片标注显示信息窗体
    marker.addEventListener("click",function(){
        showPopup.value = true
    });
}

onMounted(() => {
    getPlayDetailApi()
    initMap()
})

</script>

<template>
    <div class="map-view">
        <div class="map-warpper">
            <div class="map" ref="baiduRef"></div>
        </div>
        
        <div class="popup" v-show="showPopup">
            <div class="close-btn" @click="showPopup = false">X</div>
            <div class="pname">{{ playDetailList.shopName }}</div>
        </div>

        <div class="download-btn">
            <img src="../assets/imgs/play/download.gif">
        </div>
        <div class="position-btn">
            <img src="../assets/imgs/play/position.png">
        </div>

        <div class="address-name">
            <div class="name">
                <div>{{ playDetailList.shopName }}</div>
                <div class="span">{{ playDetailList.address }}</div>
            </div>
            <a :href="way">
                <img src="../assets/imgs/play/位置 地址.png">
            </a>
        </div>
    </div>
    
</template>

<style lang="scss" scoped>
.map-view{
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .popup{
        color: #ffffff;
        width: 60vw;
        height: 16vw;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-30vw,-8vw);
        background-color: rgba(0,0,0,0.5);
        border-radius: 4vw;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        
        .pname{
            width: 50vw;
        }
        .close-btn{
            color: #ffffff;
            position: absolute;
            padding: 2vw;
            top: 0;
            right: 0;
        }
    }

    .download-btn{
        position: absolute;
        right: 4vw;
        bottom: 30vh;
        width: 13vw;
        height: 13vw;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 1px 1px 13px -5px #747474;
    }
    .position-btn{
        position: absolute;
        right: 4vw;
        bottom: 18vh;
        width: 13vw;
        height: 13vw;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 1px 1px 13px -5px #747474;
        display: flex;
        align-items: center;
        justify-content: center;

        img{
            width: 7vw;
        }
    }

    .address-name{
        font-size: 20px;
        font-family: "微软雅黑";
        width: 100vw;
        height: 13vh;
        padding: 0 5vw;
        box-sizing: border-box;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img{
            width: 15vw;
            height: 15vw;
            margin-right: 4vw;
        }
        
        .name{
            width: 70vw;
            height: 10vw;
            line-height: 7vw;

            .span{
                color: #747474;
                font-size: 14px;
                line-height: 7vw;
            }
        }
        
    }

    .map-warpper{
        width: 100vw;
        height: 85vh;
        overflow: hidden;

        .map {
            width: 100%;
            height: 90vh;
        }
    }

    
}


</style>